1. library

                      <script src="https://blog.manvia.in/public/admin/plugins/jquery-ui/jquery-ui.min.js"></script>

2. HTML : direct items

<ul class="todo-list" data-widget="todo-list">


                  <li>
                    <!-- drag handle -->
                    <span class="handle">
                      <i class="fas fa-ellipsis-v"></i>
                      <i class="fas fa-ellipsis-v"></i>
                    </span>
                    <!-- checkbox -->
                    <div  class="icheck-primary d-inline ml-2">
                      <input type="checkbox" value="" name="todo1" id="todoCheck1">
                      <label for="todoCheck1"></label>
                    </div>
                    <!-- todo text -->
                    <span class="text">Design a nice theme</span>
                    <!-- Emphasis label -->
                    <small class="badge badge-danger"><i class="far fa-clock"></i> 2 mins</small>
                    <!-- General tools such as edit or delete-->
                    <div class="tools">
                      <i class="fas fa-edit"></i>
                      <i class=" fas fa-times"></i>
                    </div>
                  </li>


                  <li>
                    <span class="handle">
                      <i class="fas fa-ellipsis-v"></i>
                      <i class="fas fa-ellipsis-v"></i>
                    </span>
                    <div  class="icheck-primary d-inline ml-2">
                      <input type="checkbox" value="" name="todo2" id="todoCheck2" checked>
                      <label for="todoCheck2"></label>
                    </div>
                    <span class="text">Make the theme responsive</span>
                    <small class="badge badge-info"><i class="far fa-clock"></i> 4 hours</small>
                    <div class="tools">
                      <i class="fas fa-edit"></i>
                      <i class="fas fa-trash-o"></i>
                    </div>
                  </li>

                 
                </ul>

Note that class="todo-list"

3. script

$('.todo-list').sortable({
    placeholder         : 'sort-highlight',
    handle              : '.handle',
    forcePlaceholderSize: true,
    zIndex              : 999999
  })

1. Create group container

              <div class="col-md-12 connectedSortable">

              </div>
              

2. Add child items

              <ul class="todo-list" data-widget="todo-list">
                 <li>Item 1</li>
              </ul>
              

3. Add script

              $('.connectedSortable').sortable({
                placeholder         : 'sort-highlight',
                connectWith         : '.connectedSortable',
                handle              : '.card-header, .nav-tabs',
                forcePlaceholderSize: true,
                zIndex              : 999999
              })
              $('.connectedSortable .card-header, .connectedSortable .nav-tabs-custom').css('cursor', 'move')

            

Complete code

            <div class="col-md-12 connectedSortable">
                <ul class="todo-list" data-widget="todo-list">
                   <li>Item 1</li>
                   <li>Item 2</li>
                 </ul>

                 <ul class="todo-list" data-widget="todo-list">
                   <li>Item 1</li>
                   <li>Item 2</li>
                 </ul>

            </div>

            

            $('.connectedSortable').sortable({
                placeholder         : 'sort-highlight',
                connectWith         : '.connectedSortable',
                handle              : '.card-header, .nav-tabs',
                forcePlaceholderSize: true,
                zIndex              : 999999
              })
              $('.connectedSortable .card-header, .connectedSortable .nav-tabs-custom').css('cursor', 'move')



              $('.todo-list').sortable({
                  placeholder         : 'sort-highlight',
                  handle              : '.handle',
                  forcePlaceholderSize: true,
                  zIndex              : 999999
                })

                      <li  id="item_1" >Item 1</li>
                      <li  id="item_2" >Item 2</li>
                  

                  $('.todo-list').sortable({
                      placeholder         : 'sort-highlight',
                      handle              : '.handle',
                      forcePlaceholderSize: true,
                      zIndex              : 999999,

                      start: function(e, ui) {
                          
                          // creates a temporary attribute on the element with the old index
                          $(this).attr('data-previndex', ui.item.index());
                      },
                      update: function(e, ui) {
                          // gets the new and old index then removes the temporary attribute
                          var newIndex = ui.item.index();
                          var oldIndex = $(this).attr('data-previndex');
                          var element_id = ui.item.attr('id');
                          alert('id of Item moved = '+element_id+' old position = '+oldIndex+' new position = '+newIndex);
                          $(this).removeAttr('data-previndex');
                      }


                    })

                  

                      <form id="frm_sorting" method="POST" action="">
                                 
                                  <input name="_method" type="hidden" value="put">
                                  <input name="boq_id" type="hidden" value="1" >
                                  
                    </form> 



                      <div class="col-md-12 connectedSortable">
                          <div class="card-header category_panel" data-id="1">
                            .... 

                          </div>  

                          <div class="card-header category_panel" data-id="2">
                            .... 

                          </div>  
                      </div>  

                     

class="category_panel" is same for each item
data-id is different

                      $('.connectedSortable').sortable({
                        placeholder         : 'sort-highlight',
                        connectWith         : '.connectedSortable',
                        handle              : '.card-header, .nav-tabs',
                        forcePlaceholderSize: true,
                        zIndex              : 999999,

                        start: function(e, ui) {
                            
                            // creates a temporary attribute on the element with the old index
                            $(this).attr('data-previndex', ui.item.index());
                        },
                        update: function(e, ui) {
                          

                            $('.category_panel').each(function(index, obj) {
                                //console.log($(this).attr('data-id'));
                                var item_id=$(this).attr('data-id');
                                $('#frm_sorting').append("<input type='hidden' name='category_id[]' value='"+item_id+"' />"); 
                            })


                          $('#frm_sorting').submit();

                        }


                      })

                    

                    <li class="item_1" data-category="1" data-id="100">

                    </li>

                    <li class="item_1" data-category="1" data-id="101">

                    </li>

                    

class="item_1" data-category="1" is same for each item
data-id is different

                    $('.todo-list').sortable({
                            placeholder         : 'sort-highlight',
                            handle              : '.handle',
                            forcePlaceholderSize: true,
                            zIndex              : 999999,

                            start: function(e, ui) {
                                
                                // creates a temporary attribute on the element with the old index
                                $(this).attr('data-previndex', ui.item.index());
                            },
                            update: function(e, ui) {
                                // gets the new and old index then removes the temporary attribute
                                var newIndex = ui.item.index();
                                //var oldIndex = $(this).attr('data-id');
                                //console.log($(this));
                                var element_id = ui.item.attr('data-category');
                                //alert(element_id);
                                //alert('id of Item moved = '+element_id+' old position = '+oldIndex+' new position = '+newIndex);
                              

                                // $(this).parent().find('li').each(function(index, obj) {
                                //      console.log(obj);
                                // })

                                $('.item_'+element_id).each(function(index, obj) {
                                    var item_id=$(this).attr('data-id');
                                    $('#frm_sorting').append("<input type='hidden' name='item_id[]' value='"+item_id+"' />"); 
                                })



                                $('#frm_sorting').submit();

                            }


                          });